<template>
  <div class="tabs-container">
    <div class="tabs">
      <div class="link" @click="goto('https://weibo.com/yeshaojun0325/profile?rightmod=1&wvr=6&mod=personinfo')">
        <i class="iconfont icon-weibo"></i>
        <p>微博</p>
      </div>
      <div class="link" @click="goto('https://www.jianshu.com/u/bc10896579bb')">
        <i class="iconfont icon-xiezuo"></i>
        <p>简书</p>
      </div>
      <div class="link" @click="goto('https://github.com/yeshaojun')">
        <i class="iconfont icon-github"></i>
        <p>github</p>
      </div>
        <div class="link">
        <i class="iconfont icon-weixin"></i>
        <p>微信</p>
      </div>
    </div>
    <div class="tabs-bottom">
        <h3>合作联系</h3>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goto (url) {
      window.open(url)
    }
  }
}
</script>

<style lang="stylus" scoped>
.tabs
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  width: 100%
  height: 126px
  background-color: #fff
  .link
    padding: 20px
    margin-top 20px
    cursor pointer
    text-align center
    i
      font-size 24px
      color #CAA56A
    p
      text-align: center
      font-size: 14px
      line-height: 40px
      text-align center
      color #CAA56A
.tabs-bottom
  background-color: #ffffff
  text-align:center
  height: 40px
  border-top: 1px solid #ccc
  h3
    font-size: 18px
    font-weight: bold
    line-height: 40px

</style>
